﻿@page "/buttons/split-button"

@using Syncfusion.Blazor.SplitButtons
@inherits SampleBaseComponent;

<SampleDescription>
   <p>This sample demonstrates the default functionalities of the SplitButton component. By clicking primary button default action will be triggered and clicking secondary button will display popup with list of action items.</p>
</SampleDescription>
<ActionDescription>
    <p>The <code>SplitButton</code> component has primary and secondary buttons. Primary button is used to select default action and secondary button is used to toggle contextual overlays for displaying list of action items. It can contain both text and images.</p>
    <p>In this sample, SplitButton contains icon, content and list of action items, and can be added using
       <a target=""_blank"" class=""code"" href="https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.SplitButtons.SfSplitButton~IconCss.html">IconCss</a>,
       <a target=""_blank"" class=""code"" href="https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.SplitButtons.SfSplitButton~Content.html">Content</a> and
       <a target = ""_blank"" class=""code"" href="https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.SplitButtons.SfSplitButton~Items.html">Items</a> property.
    </p>
    <p>More information about Blazor SplitButton component can be found in this <a target = ""_blank"" href="https://blazor.syncfusion.com/documentation/split-button/getting-started/">documentation section</a>.</p>
</ActionDescription>


<div class="control-section">
    <div class="button-section">
        <div id="button-control">
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-lg-3 col-md-3">
                    <SfSplitButton IconCss=@PASTE>
                        <DropDownMenuItems>
                            <DropDownMenuItem Text="Paste" IconCss=@PASTE></DropDownMenuItem>
                            <DropDownMenuItem Text="Paste Special" IconCss=@PASTESPECIAL></DropDownMenuItem>
                            <DropDownMenuItem Text="Paste as Formula" IconCss=@PASTEASFORMULA></DropDownMenuItem>
                            <DropDownMenuItem Text="Paste as Hyperlink" IconCss=@PASTEASHYPERLINK></DropDownMenuItem>
                        </DropDownMenuItems>
                    </SfSplitButton>
                </div>
                <div class="col-xs-12 col-sm-6 col-lg-3 col-md-3">
                    <SfSplitButton Content="Paste">
                        <DropDownMenuItems>
                            <DropDownMenuItem Text="Paste" IconCss=@PASTE></DropDownMenuItem>
                            <DropDownMenuItem Text="Paste Special" IconCss=@PASTESPECIAL></DropDownMenuItem>
                            <DropDownMenuItem Text="Paste as Formula" IconCss=@PASTEASFORMULA></DropDownMenuItem>
                            <DropDownMenuItem Text="Paste as Hyperlink" IconCss=@PASTEASHYPERLINK></DropDownMenuItem>
                        </DropDownMenuItems>
                    </SfSplitButton>
                </div>
                <div class="col-xs-12 col-sm-6 col-lg-3 col-md-3">
                    <SfSplitButton Content="Paste" IconCss=@PASTE>
                        <DropDownMenuItems>
                            <DropDownMenuItem Text="Paste" IconCss=@PASTE></DropDownMenuItem>
                            <DropDownMenuItem Text="Paste Special" IconCss=@PASTESPECIAL></DropDownMenuItem>
                            <DropDownMenuItem Text="Paste as Formula" IconCss=@PASTEASFORMULA></DropDownMenuItem>
                            <DropDownMenuItem Text="Paste as Hyperlink" IconCss=@PASTEASHYPERLINK></DropDownMenuItem>
                        </DropDownMenuItems>
                    </SfSplitButton>
                </div>
                <div class="col-xs-12 col-sm-6 col-lg-3 col-md-3">
                    <SfSplitButton Content="Paste" IconCss=@PASTE>
                        <DropDownMenuItems>
                            <DropDownMenuItem Text="Paste" IconCss=@PASTE></DropDownMenuItem>
                            <DropDownMenuItem Text="Paste Special" IconCss=@PASTESPECIAL Disabled="true"></DropDownMenuItem>
                            <DropDownMenuItem Text="Paste as Formula" IconCss=@PASTEASFORMULA Disabled="true"></DropDownMenuItem>
                            <DropDownMenuItem Text="Paste as Hyperlink" IconCss=@PASTEASHYPERLINK Disabled="true"></DropDownMenuItem>
                        </DropDownMenuItems>
                    </SfSplitButton>
                </div>
            </div>
        </div>
    </div>
</div>

@code {
    const string PASTE = "e-btn-icons e-paste";
    const string PASTESPECIAL = "e-btn-icons e-paste-special";
    const string PASTEASFORMULA = "e-btn-icons e-paste-formula";
    const string PASTEASHYPERLINK = "e-btn-icons e-paste-hyperlink";

}
<style>
    #button-control {
        width: 100%;
        margin: 11% 0;
        text-align: center;
    }

    .button-section {
        width: 80%;
        margin: auto;
    }

    #button-control .col-sm-6 {
        margin: 25px 0;
    }

    @@font-face {
        font-family: 'e-btn-icons';
        src: url(data:application/x-font-ttf;charset=utf-8;base64,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AwYHCQsMAAAAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQAnAAEAAQAAAAAAAgAHACgAAQAAAAAAAwAnAC8AAQAAAAAABAAnAFYAAQAAAAAABQALAH0AAQAAAAAABgAnAIgAAQAAAAAACgAsAK8AAQAAAAAACwASANsAAwABBAkAAAACAO0AAwABBAkAAQBOAO8AAwABBAkAAgAOAT0AAwABBAkAAwBOAUsAAwABBAkABABOAZkAAwABBAkABQAWAecAAwABBAkABgBOAf0AAwABBAkACgBYAksAAwABBAkACwAkAqMgRUoyIFNwbGl0IGJ1dHRvbiBwYXN0ZSBpY29ucyBmb3IgdGhlbWVzUmVndWxhckVKMiBTcGxpdCBidXR0b24gcGFzdGUgaWNvbnMgZm9yIHRoZW1lc0VKMiBTcGxpdCBidXR0b24gcGFzdGUgaWNvbnMgZm9yIHRoZW1lc1ZlcnNpb24gMS4wRUoyIFNwbGl0IGJ1dHRvbiBwYXN0ZSBpY29ucyBmb3IgdGhlbWVzRm9udCBnZW5lcmF0ZWQgdXNpbmcgU3luY2Z1c2lvbiBNZXRybyBTdHVkaW93d3cuc3luY2Z1c2lvbi5jb20AIABFAEoAMgAgAFMAcABsAGkAdAAgAGIAdQB0AHQAbwBuACAAcABhAHMAdABlACAAaQBjAG8AbgBzACAAZgBvAHIAIAB0AGgAZQBtAGUAcwBSAGUAZwB1AGwAYQByAEUASgAyACAAUwBwAGwAaQB0ACAAYgB1AHQAdABvAG4AIABwAGEAcwB0AGUAIABpAGMAbwBuAHMAIABmAG8AcgAgAHQAaABlAG0AZQBzAEUASgAyACAAUwBwAGwAaQB0ACAAYgB1AHQAdABvAG4AIABwAGEAcwB0AGUAIABpAGMAbwBuAHMAIABmAG8AcgAgAHQAaABlAG0AZQBzAFYAZQByAHMAaQBvAG4AIAAxAC4AMABFAEoAMgAgAFMAcABsAGkAdAAgAGIAdQB0AHQAbwBuACAAcABhAHMAdABlACAAaQBjAG8AbgBzACAAZgBvAHIAIAB0AGgAZQBtAGUAcwBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAALAQIBAwEEAQUBBgEHAQgBCQEKAQsBDAAOUGFzdGVfTWF0ZXJpYWwVUGFzdGVTcGVjaWFsX01hdGVyaWFsFlBhc3RlRm9ybXVsYV9Cb290c3RyYXAYUGFzdGVIeXBlcmxpbmtfQm9vdHN0cmFwFlBhc3RlU3BlY2lhbF9Cb290c3RyYXAVUGFzdGVGb3JtdWxhX01hdGVyaWFsD1Bhc3RlX0Jvb3RzdHJhcBdQYXN0ZUh5cGVybGlua19NYXRlcmlhbBNQYXN0ZU1haW5fQm9vdHN0cmFwElBhc3RlTWFpbl9NYXRlcmlhbAAA) format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    .e-btn-icons {
        font-family: 'e-btn-icons';
        font-weight: normal;
    }

    .e-paste::before {
        content: '\e700';
    }

    .e-paste-special::before {
        content: '\e701';
    }

    .e-paste-formula::before {
        content: '\e705';
    }

    .e-paste-hyperlink::before {
        content: '\e707';
    }

    .material .e-paste::before,
    .bootstrap .e-paste::before {
        content: '\e706';
    }

    .material .e-paste-special::before,
    .bootstrap .e-paste-special::before {
        content: '\e704';
    }

    .material .e-paste-formula::before,
    .bootstrap .e-paste-formula::before {
        content: '\e702';
    }

    .material .e-paste-hyperlink::before,
    .bootstrap .e-paste-hyperlink::before {
        content: '\e703';
    }
</style>
